1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60


main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3em; /* 6/2 = 3 */
    margin-left: -9em; /* 18/2 = 9 */
    width: 18em;
    height: 6em;
}

main {
    position: absolute;
    top: calc(50% - 3em);
    left: calc(50% - 9em);
    width: 18em;
    height: 6em;
}

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50% auto 0;
    transform: translateY(-50%);
}

main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}



body {
    display: flex;
    min-height: 100vh;
    margin: 0;
}
main {
    margin: auto;
}


main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18em;
    height: 10em;
}

1 参考资料

  1. 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
  2. 解读 CSS 布局之水平垂直居中
  3. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）
  4. CSS 元素垂直居中的 6种方法
  5. 元素垂直居中的-6种方法
  6. Absolute Centering in CSS
  7. 用 CSS 实现元素垂直居中，有哪些好的方案？
  8. CSS垂直居中的11种实现方式
  9. CSS使用技巧
  10. CSS居中大全
  11. CSS实现垂直居中的常用方法
  12. CSS垂直居中的11种实现方式
  13. CSS实现水平垂直居中方式

最后更新： 2022年03月02日 03:32

原始链接： http://rawbin-.github.io/dev-app/2016-04-12-css-position-center/

赏
× 赞赏这个人~
打赏二维码